<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>出工情况查询</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow abnormal Platform">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<!-- <el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button> -->
						<!-- <el-button type="default" round size="mini">导出</el-button> -->
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}|${item.city_sn}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="开始日期"
									v-model="ruleForm.date1"
									:clearable="false"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="结束日期"
									v-model="ruleForm.date2"
									:clearable="false"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class>
				<template>
					<el-table
						:data="ticketList"
						stripe
						:row-class-name="RowTbodyClass"
						:header-row-class-name="RowHeaderClass"
						:cell-class-name="CellTbodyClass"
						:header-cell-class-name="CellHeaderClass"
						@cell-click="handle"
						height="445px"
						:span-method="objectSpanMethod"
					>
						<el-table-column prop="id" label="序号" align="center" v-if="false"></el-table-column>
						<el-table-column fixed="left" prop="name" label="商圈" align="center" width="150"></el-table-column>
						<el-table-column fixed="left" prop="date_name" label="日期" align="center" width="100">
							<template slot-scope="{ row, $index }">
								<span>{{ row.date_name }}</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="item.date + ' | ' + item.week"
							align="center"
							v-for="(item, index) in demanddata"
							:key="index"
						>
							<el-table-column :prop="'yfs' + index" label="应发店铺" align="center" width="100"> </el-table-column>
							<el-table-column :prop="'wfs' + index" label="未发店铺" align="center" width="100"> </el-table-column>
							<el-table-column :prop="'zrw' + index" label="总任务" align="center" width="100"> </el-table-column>
							<el-table-column :prop="'kcg' + index" label="可出工" align="center" width="100"> </el-table-column>
							<el-table-column :prop="'wap' + index" label="未安排" align="center" width="100"> </el-table-column>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
		<div class="content_Box box-shadow mt_15">
			<div class="tableMaxBox">
				<el-tabs type="border-card" v-model="activeName">
					<el-tab-pane label="任务信息" name="one" disabled="disabled">
						<template>
							<one
								name="one"
								v-show="activeName == 'one'"
								:row_ids="row_id"
								:staff_sns="staff_sn"
								:work_dates="work_date"
								:area_ids="area_id"
								:area_names="area_name"
								:date_times="date_time"
								:monitor_types="monitor_type"
								:taskLists="taskList"
							></one>
						</template>
					</el-tab-pane>
					<el-tab-pane label="店铺信息" name="two" disabled="disabled">
						<template>
							<two
								name="two"
								v-show="activeName == 'two'"
								:row_ids="row_id"
								:staff_sns="staff_sn"
								:work_dates="work_date"
								:area_ids="area_id"
								:area_names="area_name"
								:monitor_types="monitor_type"
								:taskLists="taskList"
							></two>
						</template>
					</el-tab-pane>
					<el-tab-pane label="人才信息" name="three" disabled="disabled">
						<template>
							<three
								name="three"
								v-show="activeName == 'three'"
								:row_ids="row_id"
								:staff_sns="staff_sn"
								:work_dates="work_date"
								:area_ids="area_id"
								:area_names="area_name"
								:monitor_types="monitor_type"
								:taskLists="taskList"
							></three>
						</template>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { fetchCityList } from '@/api/city.js'
import one from './components/One.vue'
import two from './components/Two.vue'
import three from './components/Three.vue'

export default {
	name: 'ticketList',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			//搜索对应值
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			alldata: [],
			//列表展示
			ticketList: [
				{
					name: '',
					id: '',
					date_name: '',
					yfs0: '',
					yfs1: '',
					wfs0: '',
					wfs1: '',
					zrw0: '',
					zrw1: '',
					kcg0: '',
					kcg1: '',
					wap0: '',
					wap1: ''
				},
				{
					name: '',
					id: '',
					date_name: '',
					yfs0: '',
					yfs1: '',
					wfs0: '',
					wfs1: '',
					zrw0: '',
					zrw1: '',
					kcg0: '',
					kcg1: '',
					wap0: '',
					wap1: ''
				}
			],
			demanddata: [
				{ date: '------', week: '星期-' },
				{ date: '------', week: '星期-' },
				{ date: '------', week: '星期-' }
			],
			// activeName: "three",
			activeName: '',
			staff_sn: [],
			work_date: '',
			row_id: '',
			s_time_slot: '', //多选商圈
			// areaList: [], //商圈列表
			// area_id: '',
			// area_name: '',
			date_time: '',
			monitor_type: '',
			taskList: '',
			areaList: [], //区域列表
			areaStatus: true,
			cityList: [], // 城市列表
			city_val: '',
			city_id: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			s_agent_id: '',
			agent_reset: 0
		}
	},
	components: { one, two, three },
	computed: {
		city_value() {
			return this.city_val
		}
	},
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listTicket()
		}
	},
	created() {
		var d = this.date(0)
		this.ruleForm.date1 = d
		var e = this.date(3)
		this.ruleForm.date2 = e
	},
	mounted() {},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		listTicket() {
			//获取列表
			let fn = new FormData()
			fn.append('start_date', this.ruleForm.date1)
			fn.append('end_date', this.ruleForm.date2)
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			fn.append('area_id', '' + s_departmentIds_Arr)
			fn.append('agent_id', this.s_agent_id)

			this.$http.post(this.url + '/dispatch/expressList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						console.log('出工情况列表', res.data)
						if (res.data.data) {
							this.alldata = res.data.data.list
							if (res.data.data.list.length === 0) return
							//周末数据数量
							//先置空
							// if (!res.data.data.list) {
							// 	return
							// }
							this.demanddata = []
							res.data.data.list[0].dateInfo.forEach((element2, num2) => {
								this.demanddata.push({
									date: element2.date,
									week: element2.week
								})
							})
							// 数据处理
							var cc = new Array()
							res.data.data.list.forEach((element, num) => {
								for (let index = 0; index < 5; index++) {
									var obj = {}

									//商圈
									res.data.data.list.forEach(element2 => {
										if (index == 0) {
											obj['name'] = element.area_name
										} else if (index == 1) {
											obj['name'] = ''
										} else if (index == 2) {
											obj['name'] = ''
										} else if (index == 3) {
											obj['name'] = ''
										} else if (index == 4) {
											obj['name'] = ''
										}
									})

									obj['id'] = num + '+' + index

									//日期
									res.data.data.list.forEach(element2 => {
										if (index == 0) {
											obj['date_name'] = '全天'
										} else if (index == 1) {
											obj['date_name'] = '早'
										} else if (index == 2) {
											obj['date_name'] = '中'
										} else if (index == 3) {
											obj['date_name'] = '晚'
										} else if (index == 4) {
											obj['date_name'] = '夜'
										}
									})

									//应发
									element.dateInfo.forEach((element2, num2) => {
										if (element2.createdCount[index] != undefined) {
											obj['yfs' + num2] = element2.createdCount[index].count
										} else {
											obj['yfs' + num2] = ''
										}
									})

									//未发
									element.dateInfo.forEach((element2, num2) => {
										if (element2.noCreateCount[index] != undefined) {
											obj['wfs' + num2] = element2.noCreateCount[index].count
										} else {
											obj['wfs' + num2] = ''
										}
									})

									//总任务
									element.dateInfo.forEach((element2, num2) => {
										if (element2.taskCount[index] != undefined) {
											obj['zrw' + num2] = element2.taskCount[index].count
										} else {
											obj['zrw' + num2] = ''
										}
									})

									//可出工
									element.dateInfo.forEach((element2, num2) => {
										if (element2.dataStaffList[index] != undefined) {
											obj['kcg' + num2] = element2.dataStaffList[index].count
										} else {
											obj['kcg' + num2] = ''
										}
									})

									//未安排
									element.dateInfo.forEach((element2, num2) => {
										if (element2.undataStaffList[index] != undefined) {
											obj['wap' + num2] = element2.undataStaffList[index].count
										} else {
											obj['wap' + num2] = ''
										}
									})

									cc.push(obj)
								}
							})
							// console.log(cc);
							this.ticketList = cc
						} else {
							this.ticketList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//商圈更改
		changeBtndialogarea() {
			this.shearchBtn()
		},

		changeCity() {
			let [id, name, city_sn] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.city_sn = city_sn
			this.listArea() //商圈列表
		},

		// 获取商圈列表
		//获取商圈列表
		listArea() {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('agent_id', this.s_agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷' && element.id != 0) {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listTicket()
		},

		async resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			// await this.fetchCityList()
			// await this.listTicket()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			var d = this.date(0)
			this.ruleForm.date1 = d
			var e = this.date(3)
			this.ruleForm.date2 = e
			this.agent_reset += 1
		},

		CellClass(n) {
			switch (n % 5) {
				case 0:
					return 'title0'
				case 1:
					return 'title1'
				case 2:
					return 'title2'
				case 3:
					return 'title4'
				case 4:
					return 'title5'
				case 5:
					return 'title6'
				case 6:
					return 'title7'
				default:
					return 'm-cell-' + n
			}
		},
		downloadOrder() {
			//列表-导出
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				task_sn: this.s_task_sn,
				task_sn: this.s_task_sn,
				shop_id: this.s_shop_id,
				status: this.status,
				start_time: ruleForm_date1,
				end_time: ruleForm_date2
			}
			let param = $.param(obj)
			window.location.href = this.url + '/ticket/exportTicketDetail?' + param
		},
		//数据行加class
		RowTbodyClass({ row, rowIndex }) {
			return 'merchants_css-row-' + rowIndex
		},
		//表头行添加class
		RowHeaderClass({ row, rowIndex }) {
			return 'merchants_css-header' + rowIndex
		},
		//每列单元格的样式
		CellTbodyClass({ columnIndex }) {
			return this.CellClass(columnIndex)
		},
		//每列表头的样式
		CellHeaderClass({ columnIndex }) {
			return this.CellClass(columnIndex)
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.area_arr = arr
			} else {
				this.area_arr = []
			}
			this.areaStatus = !this.areaStatus
		},
		//合并列
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				if (rowIndex % 5 === 0) {
					return {
						rowspan: 5,
						colspan: 1
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0
					}
				}
			}
		},
		handle(row, column, event, cell) {
			console.log('第几行' + row.id) //商圈index+行的index
			console.log('列数据' + column)
			var rows = column.property.substring(0, 3)
			var rowsNum = column.property.slice(3)
			var arr = row.id.split('+')
			var a = arr[0] //商圈index
			var b = arr[1] //行的index
			console.log('商圈index' + a)
			console.log('行的index' + b)
			// 获取staff_sn  this.alldata[a].dateInfo[rowsNum].dataStaffList[b].staff_sn
			//可出工
			if (rows == 'kcg') {
				this.taskList = ''
				this.monitor_type = ''
				this.activeName = 'three' //第三个tab
				console.log(this.alldata[a].dateInfo[rowsNum].dataStaffList[b])
				if (this.alldata[a].dateInfo[rowsNum].dataStaffList[b] != undefined) {
					if (
						this.alldata[a].dateInfo[rowsNum].dataStaffList[b].count != 0 &&
						this.alldata[a].dateInfo[rowsNum].dataStaffList[b].count != ''
					) {
						this.row_id = row.id + '+' + this.alldata[a].dateInfo[rowsNum].date + '+' + rows //监听判断
						this.staff_sn = this.alldata[a].dateInfo[rowsNum].dataStaffList[b].staff_sn
						this.work_date = this.alldata[a].dateInfo[rowsNum].date
						this.area_id = this.alldata[a].id.toString()
						this.area_name = this.alldata[a].area_name
					}
				}
			}
			// 未安排
			if (rows == 'wap') {
				this.taskList = ''
				this.monitor_type = ''
				this.activeName = 'three' //第三个tab
				console.log(this.alldata[a].dateInfo[rowsNum].undataStaffList[b])
				if (this.alldata[a].dateInfo[rowsNum].undataStaffList[b] != undefined) {
					if (
						this.alldata[a].dateInfo[rowsNum].undataStaffList[b].count != 0 &&
						this.alldata[a].dateInfo[rowsNum].undataStaffList[b].count != ''
					) {
						this.row_id = row.id + '+' + this.alldata[a].dateInfo[rowsNum].date + '+' + rows //监听判断
						this.staff_sn = this.alldata[a].dateInfo[rowsNum].undataStaffList[b].staff_sn
						this.work_date = this.alldata[a].dateInfo[rowsNum].date
						this.area_id = this.alldata[a].id.toString()
						this.area_name = this.alldata[a].area_name
					}
				}
			}
			//总任务
			if (rows == 'zrw') {
				this.staff_sn = []
				this.monitor_type = ''
				this.activeName = 'one' //第一个tab
				console.log(this.alldata[a].dateInfo[rowsNum].taskCount[b])
				if (this.alldata[a].dateInfo[rowsNum].taskCount[b] != undefined) {
					if (
						this.alldata[a].dateInfo[rowsNum].taskCount[b].count != 0 &&
						this.alldata[a].dateInfo[rowsNum].taskCount[b].count != ''
					) {
						this.row_id = row.id + '+' + this.alldata[a].dateInfo[rowsNum].date + '+' + rows //监听判断
						// this.staff_sn = this.alldata[a].dateInfo[rowsNum].taskCount[b].staff_sn;
						this.work_date = this.alldata[a].dateInfo[rowsNum].date
						this.area_id = this.alldata[a].id.toString()
						this.area_name = this.alldata[a].area_name
						this.date_time = b.toString()
						this.taskList = 'taskList'
					}
				}
			}
			//未发店铺
			if (rows == 'wfs') {
				this.staff_sn = []
				this.taskList = ''
				this.activeName = 'two' //第二个tab
				console.log(this.alldata[a].dateInfo[rowsNum].noCreateCount[b])
				if (this.alldata[a].dateInfo[rowsNum].noCreateCount[b] != undefined) {
					console.log(1)
					if (
						this.alldata[a].dateInfo[rowsNum].noCreateCount[b].count != 0 &&
						this.alldata[a].dateInfo[rowsNum].noCreateCount[b].count != ''
					) {
						console.log(2)
						this.row_id = row.id + '+' + this.alldata[a].dateInfo[rowsNum].date + '+' + rows //监听判断
						// this.staff_sn = this.alldata[a].dateInfo[rowsNum].noCreateCount[b].staff_sn;
						this.work_date = this.alldata[a].dateInfo[rowsNum].date
						this.area_id = this.alldata[a].id.toString()
						this.area_name = this.alldata[a].area_name
						console.log(this.row_id)
						this.monitor_type = 'noCreate'
					}
				}
			}
			//应发店铺
			if (rows == 'yfs') {
				this.staff_sn = []
				this.taskList = ''
				this.activeName = 'two' //第二个tab
				console.log(this.alldata[a].dateInfo[rowsNum].createdCount[b])
				if (this.alldata[a].dateInfo[rowsNum].createdCount[b] != undefined) {
					console.log(1)
					if (
						this.alldata[a].dateInfo[rowsNum].createdCount[b].count != 0 &&
						this.alldata[a].dateInfo[rowsNum].createdCount[b].count != ''
					) {
						console.log(2)
						this.row_id = row.id + '+' + this.alldata[a].dateInfo[rowsNum].date + '+' + rows //监听判断
						// this.staff_sn = this.alldata[a].dateInfo[rowsNum].createdCount[b].staff_sn;
						this.work_date = this.alldata[a].dateInfo[rowsNum].date
						this.area_id = this.alldata[a].id.toString()
						this.area_name = this.alldata[a].area_name
						console.log(this.row_id)
						this.monitor_type = 'all'
					}
				}
			}
		},
		setValue(arrVal) {
			this.s_agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list
			this.city_val = this.cityList[0].name
			this.city_id = this.cityList[0].id
			this.listArea() //商圈列表
		}
	},
	filters: {}
}
</script>

<style scoped>
@import '../../assets/style/platform.css';
</style>



// WEBPACK FOOTER //
// src/components/abnormal/Platform.vue